<template>
  <div class="abstract">
    <!-- <div class="pdf">
      <img :src="require('@/assets/images/PDF.png')" alt="">
    </div>
    {{ pageCount }} -->
    <pdf ref="pdf" v-for="i in page" :key="i" :src="srcPdf" :page="i"/>
    
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl:"/static/1.pdf", //pdf文件路径
      page: 1,
      srcPdf:'/static/1.pdf' //需要预览得pdf
    }
  },
 mounted(){
 this.getDetails()
 },
  methods: {
    getDetails() {
      this.srcPdf = pdf.createLoadingTask(this.pdfUrl);
      this.srcPdf.then(pdf => {
              this.page = pdf.numPages;
            })
            .catch(err => {
              console.error("pdf加载失败");
            });
    },
  }
}
</script>



<style scoped lang="scss">
.abstract {
  width: 100%;
  height: 100%;
  overflow: auto;
  &>span {
    height: 100%;
    width: 50%;
  }
}
</style>